<template>
	<view>
		<u-navbar :is-back="false" :title="title" title-color="white" :background="background"></u-navbar>
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30" @click="login">
			<view class="u-m-r-10">
				<u-avatar :src="pic" size="140"></u-avatar>
			</view>
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-20 u-line-1">{{nickname}}</view>
			</view>
			<view class="u-m-l-10 u-p-10" @click="noOpen">
				<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
			</view>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="rmb-circle" title="支付" @click="noOpen"></u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="star" title="收藏" @click="noOpen"></u-cell-item>
				<u-cell-item icon="photo" title="相册" @click="noOpen"></u-cell-item>
				<u-cell-item icon="coupon" title="卡券" @click="noOpen"></u-cell-item>
				<u-cell-item icon="heart" title="关注" @click="noOpen"></u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="setting" title="设置" @click="noOpen"></u-cell-item>
				<u-cell-item icon="server-man" :title="member_num" @click="noOpen"></u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "个人中心",
				background: {
					backgroundImage: "linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%)"
				},
				pic: 'https://uviewui.com/common/logo.png',
				show: true,
				member_num: "用户数量：0",
				nickname: "未登录"
			}
		},
		onLoad() {
			this.login()
			this.getMemberNum()
		},
		methods: {
			noOpen: () => {
				uni.showToast({
					title: "暂未开发",
					mask: true,
					icon: "none"
				});
			},
			getMemberNum() {
				let that = this
				uniCloud.callFunction({
					name: "total"
				}).then(function(res) {
					that.member_num = "用户数量：" + res.result.total
				})
			},
			login() {
				let that = this
				let token = uni.getStorageSync("token")
				let id = uni.getStorageSync("id")
				if (!token) {
					uni.login({
						provider: 'weixin',
						success: function(res) {
							if (res && res.code) {
								uniCloud.callFunction({
									name: 'login-by-wx',
									data: {
										code: res.code
									}
								}).then(function(res1) {
									if (res1.success) {
										that.nickname = res1.result.uid
										uni.setStorageSync("id", res1.result.uid)
										uni.setStorageSync("openid", res1.result.openid)
										uni.setStorageSync("token", res1.result.token)
										uni.showToast({
											title: '登录成功',
											icon: "none",
											mask: true
										});
									} else {
										uni.showToast({
											title: '出现问题了',
											icon: "none",
											mask: true
										})
									}
								})
							} else {
								uni.showToast({
									title: '出现问题了',
									icon: "none",
									mask: true
								});
							}
						}
					});
				} else {
					that.nickname = id
					uni.showToast({
						title: '已经登录了',
						icon:"none",
						mask:true
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ededed;
	}

	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}

	.user-box {
		background-color: #fff;
	}
</style>
